<template>
 <div class="sheShare">
  <ul>
    <li v-for="(item ,index) in listShare" :key="item">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="4">
             <div class="grid-content bg-purple headers"><img :src="item.userImage" alt=""></div>
           </el-col>
           <el-col :span="18">
             <div class="grid-content bg-purple-light conther">
               <h3>{{item.userName}}</h3>
               <p>{{item.releaseTime}}</p>
               <h3>{{item.content}}</h3>
               <img :src="item.image" alt="">
              
              <div class="boxbottom">
                <button>点赞</button>
                <button>评论</button>
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple"> <span>删除</span></div>
          </el-col>
        </el-row>
      </li>
    </ul>

 </div>



</template>

<script>
import axios from 'axios';

export default {
  name: 'shewang',
  components: {
 
  }
  ,
  data() {
    return {
      listShare: []

    }
  },
  created() {
    this.getShare();
  },
  methods: {
    getShare() {
      axios.get('/api/CampusSharing/CampusSharingXiaoQu?Address=2')
        .then(res => {
          console.log(res);
          this.listShare = res.data;


        }).catch(err => {
          console.log(err);
        })
    }
  }
}
</script>

<style scoped>
*{
  list-style: none;
}
ul li{
  width: 95%;
 min-height: 210px;
 max-height: 1000px;
}
.headers img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: aqua;
}
.conther img{
  width: 210px;
  height: 140px;
 }

  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
    text-align: left;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
